<template>
	<view
	class="x-checkbox flex-center"
	>
		<u-checkbox
		:value="!!value"
		:name="`${ value ? '' : 'un' }selected`"
		custom-prefix="u"
		:active-color="activeColor"
		:size="size"
		shape="circle"
		@change="changeAction"
		>
			<slot></slot>
		</u-checkbox>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				default: false
			},
			activeColor: {
				default: '#FF3A2F'
			},
			size: {
				default: 32
			}
		},
		data() {
			return {
			}
		},
		methods: {
			changeAction({ value }) {
				this.$emit('input', value)
				this.$emit('change', value)
			}
		}
	}
</script>

<style scoped lang="scss">
	.x-checkbox /deep/ .u-checkbox__label {
		padding: 0;
		margin: 0;
	}
</style>
